<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC测试</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        h4 {
            font-weight: 200
        }

        h4 span {
            font-size: 16px;
        }

        video {
            width: 100%;
            height: 200px;
            object-fit: contain;
            border: 1px solid #eee;
        }

        p {
            margin: 0;
        }

        hr {
            margin-top: 40px;
            margin-bottom: 40px;
        }

        [v-cloak] {
            display: none;
        }

        .panel-new {
            margin-bottom: 5px;
            border-color: #fff;
        }

        .panel-heading {
            padding: 1px 15px;
        }

        .panel-body {
            padding: 5px 15px 0 15px;
        }

        .jumbotron-new {
            margin-top: 5px;
            margin-bottom: 5px;
            padding-bottom: 5px;
            padding-top: 5px
        }

        .jumbotron-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .jumbotron p {
            margin-bottom: 5px;
            font-size: 16px;
        }

        .alert {
            margin-bottom: 5px;
            padding: 5px 15px;
        }

        .progress {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="jumbotron jumbotron-new">
                <div class="jumbotron-title">
                    <h2 style="display:inline-block">WebRTC测试</h2>
                    <button class="btn btn-success btn-lg" @click="startTest">开始测试</>
                </div>
                <p class="lead">此网站用于测试浏览器是否支持WebRTC</p>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>WebRTC&ensp;&ensp;<span v-cloak>{{checkState.apiCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.apiCheckState == '检测完成'">
                    <div v-if="webRTCApi" class="alert alert-success">当前浏览器支持WebRTC！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器暂不支持WebRTC！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>获取设备列表&ensp;&ensp;<span v-cloak>{{checkState.apiCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.apiCheckState == '检测完成'">
                    <div v-if="deviceListApi" class="alert alert-success">当前浏览器支持获取设备列表！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器不支持获取设备列表！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>H264编码&ensp;&ensp;<span v-cloak>{{checkState.videoEncodeCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.videoEncodeCheckState == '检测完成'">
                    <div v-if="isH264Encode" class="alert alert-success">当前浏览器支持H264编码！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器不支持H264编码！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>H264解码&ensp;&ensp;<span v-cloak>{{checkState.videoDecodeCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.videoDecodeCheckState == '检测完成'">
                    <div v-if="isH264Decode" class="alert alert-success">当前浏览器支持H264解码！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器不支持H264解码！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>VP8编码&ensp;&ensp;<span v-cloak>{{checkState.videoEncodeCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.videoEncodeCheckState == '检测完成'">
                    <div v-if="isVP8Encode" class="alert alert-success">当前浏览器支持VP8编码！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器暂不支持VP8编码！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>VP8解码&ensp;&ensp;<span v-cloak>{{checkState.videoDecodeCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.videoDecodeCheckState == '检测完成'">
                    <div v-if="isVP8Decode" class="alert alert-success">当前浏览器支持VP8解码！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器暂不支持VP8解码！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>音频输入&ensp;&ensp;<span v-cloak>{{checkState.audioinputCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.audioinputCheckState == '检测完成'">
                    <div v-if="isAudioInputDevice">
                        <div class="alert alert-success">检测到音频输入设备！！！</div>
                        <p v-for="(item, idx) in audioinputDevices" :key="idx">
                            {{item.label}}
                        </p>
                    </div>
                    <div v-else class="alert alert-danger">未检测到音频输入设备！！！</div>
                    <div v-if="isAudioInput" class="alert alert-success">支持音频输入！！！</div>
                    <div v-if="isAudioInput" class="progress">
                        <div class="progress-bar" role="progressbar" :aria-valuenow="sounder" aria-valuemin="0" aria-valuemax="100" :style="{width: sounder*4 + '%'}">
                        </div>
                    </div>
                    <div v-else class="alert alert-danger">不支持音频输入！！！</div>

                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>音频输出&ensp;&ensp;<span v-cloak>{{checkState.audiooutputCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.audiooutputCheckState == '检测完成'">
                    <div v-if="isAudioOutputDevice">
                        <div class="alert alert-success">检测到音频输出设备！！！</div>
                        <p v-for="(item, idx) in audiooutputDevices" :key="idx">
                            {{item.label}}
                        </p>
                        <audio controls id="test">
                            <source src="./media/philomel.mp3">
                        </audio>
                    </div>
                    <div v-else class="alert alert-danger">未检测到音频输出设备！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>视频输入&ensp;&ensp;<span v-cloak>{{checkState.videoinputCheckState}}</span></h4>
                </div>
                <div class="panel-body video-input" v-cloak v-if="checkState.videoinputCheckState == '检测完成'">
                    <div v-if="isVideoInputDevice">
                        <div class="alert alert-success">检测到视频输入设备！！！</div>
                        <p v-for="(item, idx) in videoinputDevices" :key="idx">
                            {{item.label}}
                        </p>
                    </div>
                    <div v-else class="alert alert-danger">未检测到视频输入设备！！！</div>
                    <div v-if="isVideoInput">
                        <div class="alert alert-success">支持视频输入！！！</div>
                        <video class="video-box" muted autoplay controls playsinline></video>
                    </div>
                    <div v-else class="alert alert-danger">不支持视频输入！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>分辨率检测&ensp;&ensp;<span v-cloak>{{checkState.videoResolutionCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.videoResolutionCheckState !== ''">
                    <p v-for="(item, idx) in resolutionList" :key="idx">
                        {{item.width}} X {{item.height}}: {{item.resolutionState}}
                    </p>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>屏幕共享检测&ensp;&ensp;<span v-cloak>{{checkState.screenShareCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.screenShareCheckState == '检测完成'">
                    <div v-if="isScreenShare" class="alert alert-success">当前浏览器支持屏幕共享！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器暂不支持屏幕共享！！！</div>
                </div>
            </div>
            <div class="panel panel-primary panel-new">
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>影音共享检测&ensp;&ensp;<span v-cloak>{{checkState.mediaShareCheckState}}</span></h4>
                </div>
                <div class="panel-body" v-cloak v-if="checkState.mediaShareCheckState == '检测完成'">
                    <div v-if="isMediaShare" class="alert alert-success">当前浏览器支持影音共享！！！</div>
                    <div v-else class="alert alert-danger">当前浏览器暂不支持影音共享！！！</div>
                </div>
            </div>
            <!-- <div class="panel panel-primary panel-new">
                <video muted autoplay playsinlne id="checkvideo" style="display:none"></video>
                <div class="panel-heading" style="background-color:#3981fc">
                    <h4>连通性检测&ensp;&ensp;<span v-cloak>{{checkState.connectivityCheckState}}</span></h4>
                </div>
                <input type="text" id="roomId" value="123" hidden>
                <div class="panel-body" v-cloak v-if="checkState.connectivityCheckState === '检测完成'">
                    <div v-if="isConnectivity" class="alert alert-success">连通性检测成功！！！</div>
                    <div v-else class="alert alert-danger">连通性检测失败！！！</div>
                </div>
            </div> -->
        </div>
    </div>
</body>
<!-- vConsole -->
<script src="./js/vconsole.min.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="./js/jquery.2.0.0.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<!-- webrtc 兼容文件 -->
<script src="./js/adapter-latest.js"></script>
<!-- vue -->
<script src="./js/vue@2_dist.js"></script>

<script>
    var vconsole = new VConsole();
    new Vue({
        el: '#app',
        data: {
            checkState: {
                apiCheckState: '', // api检测的状态
                videoEncodeCheckState: '', // 视频编码格式检测的状态
                videoDecodeCheckState: '', // 视频解码格式检测的状态
                audioinputCheckState: '',  // 音频输入检测的状态
                audiooutputCheckState: '', // 音频输出检测的状态
                videoinputCheckState: '', // 视频输入检测的状态
                videoResolutionCheckState: '', // 视频分辨率支持检测的状态
                connectivityCheckState: '', // 连通性检测的状态
                screenShareCheckState: '', // 屏幕共享检测的状态
                mediaShareCheckState: '', // 影音共享检测的状态
            },
            webRTCApi: false, // 是否支持webrtc api
            deviceListApi: false, // 是否支持获取设备列表api
            isH264Encode: false, // 是否支持H264编码
            isVP8Encode: false, // 是否支持VP8编码
            isH264Decode: false, // 是否支持H264解码
            isVP8Decode: false, // 是否支持VP8解码
            isAudioInputDevice: false, // 是否有音频输入设备
            isAudioOutputDevice: false, // 是否有音频输出设备
            isVideoInputDevice: false, // 是否有视频输入设备
            isAudioInput: false, // 是否支持音频输入
            isVideoInput: false, // 是否支持视频输入
            isConnectivity: false, // 是否支持连通
            isScreenShare: false, // 是否支持屏幕共享
            isMediaShare: false, // 是否支持影音共享
            audioinputDevices: [], // 音频输入设备列表
            audiooutputDevices: [], // 音频输出设备列表
            videoinputDevices: [], // 视频输入设备列表
            localVideoStream: null, // 本地视频流
            localAudioStream: null, // 本地音频流
            sounder: '', // 麦克风输入音量
            resolutionList: [ // 视频分辨率检测列表
                {
                    width: 160,
                    height: 96,
                    resolutionState: ''
                },
                {
                    width: 288,
                    height: 160,
                    resolutionState: ''
                },
                {
                    width: 516,
                    height: 288,
                    resolutionState: ''
                },
                {
                    width: 640,
                    height: 360,
                    resolutionState: ''
                },
                {
                    width: 848,
                    height: 480,
                    resolutionState: ''
                },
                {
                    width: 1280,
                    height: 720,
                    resolutionState: ''
                },
                {
                    width: 1920,
                    height: 1080,
                    resolutionState: ''
                },
            ]
        },
        created() {
            if (navigator.userAgent.includes('Mobile')) {
                this.resolutionList = [{
                    width: 96,
                    height: 160,
                    resolutionState: ''
                }, {
                    width: 160,
                    height: 288,
                    resolutionState: ''
                }, {
                    width: 288,
                    height: 516,
                    resolutionState: ''
                }, {
                    width: 360,
                    height: 640,
                    resolutionState: ''
                }, {
                    width: 480,
                    height: 848,
                    resolutionState: ''
                }, {
                    width: 720,
                    height: 1280,
                    resolutionState: ''
                }, {
                    width: 1080,
                    height: 1920,
                    resolutionState: ''
                }]
            }
        },
        methods: {
            // 开始测试按钮
            startTest() {
                this.checkApi();
                this.checkVideoDecode();
                this.checkDeviceSupport();
                this.checkMediaShare();
                this.checkScreenShare();
            },
            // 检测相关api是否支持
            checkApi() {
                this.checkState.apiCheckState = '正在检测...';
                try {
                    !!RTCPeerConnection && (this.webRTCApi = true);
                    !!navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices && (this.deviceListApi = true);
                } catch (err) {
                    console.error(err);
                }
                this.checkState.apiCheckState = '检测完成';
            },
            // 检测是否支持h264或vp8解码
            checkVideoDecode() {
                this.checkState.videoDecodeCheckState = '正在检测...';
                setTimeout(() => {
                    this.checkState.videoDecodeCheckState = '检测完成';
                }, 2500);
                try {
                    if (!RTCPeerConnection) return;
                    (new RTCPeerConnection).createOffer({
                        offerToReceiveAudio: true,
                        offerToReceiveVideo: true,
                    }).then(offer => {
                        console.log(`接收端（解码）：`);
                        console.log(offer.sdp);
                        this.checkState.videoDecodeCheckState = '检测完成';
                        this.isH264Decode = offer.sdp.includes('H264');
                        this.isVP8Decode = offer.sdp.includes('VP8');
                    }).catch(err => {
                        console.log(`解码createOffer失败：`, err.toString());
                        this.checkState.videoDecodeCheckState = '检测完成';
                    })
                } catch (err) {
                    console.error(err);
                    this.checkState.videoDecodeCheckState = '检测完成';
                }
            },
            // 检测是否支持h264或vp8编码
            checkVideoEncode() {
                this.checkState.videoEncodeCheckState = '正在检测...';
                setTimeout(() => {
                    this.checkState.videoEncodeCheckState = '检测完成';
                }, 25000);
                try {
                    if (!RTCPeerConnection || !this.localVideoStream) return;
                    const PeerConnection = new RTCPeerConnection();
                    if (PeerConnection.addTrack && PeerConnection.signalingState !== 'closed') {
                        PeerConnection.addTrack(this.localVideoStream.getVideoTracks()[0], this.localVideoStream);
                    } else {
                        PeerConnection.dispatchEvent(new Event('negotiationneeded'));
                    }
                    PeerConnection.createOffer().then(offer => {
                        console.log(`发送端（编码）：`);
                        console.log(offer.sdp);
                        this.checkState.videoEncodeCheckState = '检测完成';
                        this.isH264Encode = offer.sdp.includes('H264');
                        this.isVP8Encode = offer.sdp.includes('VP8');
                    }).catch(err => {
                        console.log(`编码createOffer失败：`, err.toString());
                        this.checkState.videoEncodeCheckState = '检测完成';
                    })
                } catch (err) {
                    console.error(err);
                    this.checkState.videoEncodeCheckState = '检测完成';
                }
            },
            // 检测是否支持音视频采集
            checkDeviceSupport() {
                this.checkState.audioinputCheckState = '正在检测...';
                this.checkState.audiooutputCheckState = '正在检测...';
                this.checkState.videoinputCheckState = '正在检测...';
                this.checkState.videoResolutionCheckState = '正在检测...';
                this.checkState.videoEncodeCheckState = '正在检测...';
                setTimeout(() => {
                    this.checkState.audioinputCheckState = '检测完成';
                    this.checkState.audiooutputCheckState = '检测完成';
                    this.checkState.videoinputCheckState = '检测完成';
                    this.checkState.videoEncodeCheckState = '检测完成';
                }, 2500);

                if (this.deviceListApi) {
                    navigator.mediaDevices.enumerateDevices().then((devicesList) => {
                        console.log(`获取到设备列表：`, devicesList);
                        devicesList.forEach(item => {
                            if (item.kind === 'audioinput') {
                                this.audioinputDevices.push(item);
                            }
                            if (item.kind === 'audiooutput') {
                                this.audiooutputDevices.push(item);
                            }
                            if (item.kind === 'videoinput') {
                                this.videoinputDevices.push(item);
                            }
                        })
                        if (this.audioinputDevices.length != 0) {
                            this.isAudioInputDevice = true;
                            this.checkAudioInput();
                        }
                        if (this.audioinputDevices.length != 0) {
                            this.isAudioOutputDevice = true;
                            this.checkState.audiooutputCheckState = '检测完成';
                        }
                        if (this.videoinputDevices.length != 0) {
                            this.isVideoInputDevice = true;
                            this.checkVideoInput().then(() => {
                                this.checkVideoEncode();
                                this.checkResolution();
                            }).catch(() => {
                                this.checkVideoEncode();
                                this.checkResolution();
                            })
                        }
                    }).catch(err => {
                        console.log(`获取设备列表失败：`, err.toString());
                        this.checkAudioInput();
                        this.checkVideoInput().then(() => {
                            this.checkVideoEncode();
                            this.checkResolution();
                        }).catch(() => {
                            this.checkVideoEncode();
                            this.checkResolution();
                        })
                    })
                } else {
                    this.checkAudioInput();
                    this.checkVideoInput().then(() => {
                        this.checkVideoEncode();
                        this.checkResolution();
                    }).catch(() => {
                        this.checkVideoEncode();
                        this.checkResolution();
                    })
                }
            },
            // 音频输入检测
            checkAudioInput() {
                try {
                    window.AudioContext = window.AudioContext || window.webkitAudioContext || mozAudioContext;
                    if (!window.AudioContext || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) return;
                    let context = new AudioContext();
                    let script = context.createScriptProcessor(2048, 1, 1);
                    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
                        console.log(`获取到麦克风stream`, stream);
                        this.isAudioInput = true;
                        this.checkState.audioinputCheckState = '检测完成';
                        let audioinput = context.createMediaStreamSource(stream);
                        audioinput.connect(script);
                        script.connect(context.destination);
                    }).catch(err => {
                        console.log(`获取麦克风stream失败：`, err.toString());
                        this.checkState.audioinputCheckState = '检测完成';
                    });

                    script.onaudioprocess = (event) => {
                        let input = event.inputBuffer.getChannelData(0);
                        let instant = 0.0;
                        let sum = 0.0;
                        for (let i = 0; i < input.length; ++i) {
                            sum += input[i] * input[i];
                        }
                        instant = Math.sqrt(sum / input.length);
                        this.sounder = instant * 100;
                    };
                } catch (err) {
                    console.error(err);
                    this.checkState.audioinputCheckState = '检测完成';
                }
            },
            // 视频输入检测
            checkVideoInput() {
                return new Promise((resolve, reject) => {
                    try {
                        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) return reject();
                        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                            console.log(`获取到摄像头stream`, stream);
                            this.isVideoInput = true;
                            this.checkState.videoinputCheckState = '检测完成';
                            this.localVideoStream = stream;
                            setTimeout(() => {
                                if (document.querySelector('.video-box')) {
                                    document.querySelector('.video-box').srcObject = stream;
                                }
                            }, 1000);
                            return resolve();
                        }).catch(err => {
                            console.log(`获取摄像头stream失败：`, err.toString());
                            return reject();
                        })
                    } catch (err) {
                        console.error(err);
                        return reject();
                    }
                })
            },
            // 视频输入分辨率检测
            checkResolution() {
                this.checkState.videoResolutionCheckState = '正在检测...';
                if (!this.localVideoStream) return that.checkState.videoResolutionCheckState = '检测完成';
                videoTrack = this.localVideoStream.getVideoTracks()[0];
                const resolutionList = [...this.resolutionList];

                let i = 0;
                const that = this;
                function check(index) {
                    const constraints = {
                        height: {
                            ideal: resolutionList[index].height,
                        },
                        width: {
                            ideal: resolutionList[index].width,
                        }
                    }
                    try {
                        videoTrack.applyConstraints(constraints).then(() => {
                            console.log(`设置分辨率：${resolutionList[index].width} X ${resolutionList[index].height} 成功`);
                            const settings = videoTrack.getSettings();
                            if (settings.height == resolutionList[index].height && settings.width == resolutionList[index].width) {
                                that.resolutionList[index].resolutionState = '支持';
                            } else {
                                that.resolutionList[index].resolutionState = '不支持';
                            }
                            if (i == resolutionList.length) {
                                that.checkState.videoResolutionCheckState = '检测完成';
                            } else {
                                check(i++);
                            }
                        }).catch(err => {
                            console.log(`设置分辨率：${resolutionList[index].width} X ${resolutionList[index].height} 失败`, err);
                            that.resolutionList[index].resolutionState = '不支持';
                            if (i == resolutionList.length) {
                                that.checkState.videoResolutionCheckState = '检测完成';
                                // 某些移动端设备上，设置失败之后画面就黑屏了，且无法恢复，这里重新获取视频流并展示默认的参数
                                videoTrack.stop();
                                navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                                    that.localVideoStream = stream;
                                    if (document.querySelector('.video-box')) {
                                        document.querySelector('.video-box').srcObject = stream;
                                    }
                                    const defaultSettings = stream.getVideoTracks()[0].getSettings();
                                    console.log(`默认settings: `, defaultSettings);
                                    that.resolutionList.push({
                                        height: defaultSettings.height,
                                        width: defaultSettings.width,
                                        resolutionState: '支持（默认）'
                                    })
                                })
                            } else {
                                check(i++);
                            }
                        })
                    } catch (err) {
                        console.error(err);
                        that.checkState.videoResolutionCheckState = '检测完成';
                    }
                }
                check(i++);
            },
            // 检测webrtc连通性
            checkConnectivity() {
                this.checkState.connectivityState = '正在检测...';
                setTimeout(() => {
                    this.checkState.connectivityState = '检测完成';
                }, 2500);
            },
            // 检测是否支持屏幕共享
            checkScreenShare() {
                this.checkState.screenShareCheckState = '正在检测...';
                try {
                    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) return this.checkState.screenShareCheckState = '检测完成';
                    // 移动端设备上，有相关屏幕共享api，但不支持屏幕共享
                    navigator.mediaDevices.getDisplayMedia().then(stream => {
                        this.isScreenShare = true;
                        this.checkState.screenShareCheckState = '检测完成';
                    }).catch(err => {
                        console.log(`获取屏幕stream失败：`, err.toString());
                        this.checkState.screenShareCheckState = '检测完成';
                    })
                } catch (err) {
                    console.error(err);
                    this.checkState.screenShareCheckState = '检测完成';
                }
            },
            // 检测是否支持影音共享
            checkMediaShare() {
                this.checkState.mediaShareCheckState = '正在检测...';
                const videoEle = document.createElement('video');
                if (('captureStream' in videoEle) || ('mozCaptureStream' in videoEle) || ('webkitCaptureStream' in videoEle)) {
                    this.isMediaShare = true;
                }
                this.checkState.mediaShareCheckState = '检测完成';
            }
        }
    })

</script>

</html>